<template>
	<view class="dashboard-stock-container">
		<view class="header-class tn-flex justify-start">
			<view class="status_bar" style="height: var(--status-bar-height); width: 100%; "></view>
			<tn-navbar fixed back-text="返回">库存状况</tn-navbar>
		</view>

		<view class="tn-p tn-white_bg">
			

			<view class="tn-py-md">
				<view class="section-title tn-text-bold tn-text-xl tn-mb-sm">
					<view class="indicator"></view>
					库存情况
				</view>

				<view class="cards-grid-inventory">
					<view class="card-item-inventory">
						<text class="card-title">库存件数</text>
						<text class="card-value green-text">7769.19</text>
					</view>
					<view class="card-item-inventory">
						<text class="card-title">近效期件数</text>
						<text class="card-value green-text">9.25</text>
					</view>
					<view class="card-item-inventory">
						<text class="card-title">不合格件数</text>
						<text class="card-value green-text">0.52</text>
					</view>
					<view class="card-item-inventory">
						<text class="card-title">不动销件数</text>
						<text class="card-value green-text">7654.55</text>
					</view>
					<view class="card-item-inventory">
						<text class="card-title">库存金额</text>
						<text class="card-value blue-text">21.68万</text>
					</view>
					<view class="card-item-inventory">
						<text class="card-title">近效期金额</text>
						<text class="card-value blue-text">1.60万</text>
					</view>
					<view class="card-item-inventory">
						<text class="card-title">不合格金额</text>
						<text class="card-value blue-text">0.50万</text>
					</view>
					<view class="card-item-inventory">
						<text class="card-title">不动销金额</text>
						<text class="card-value blue-text">6.27万</text>
					</view>
				</view>
			</view>

			<view class="tn-py-md">
				<view class="tn-flex tabs-sub-container">
					<view class="tab-item" :class="{ 'active': activeSubTab === 'inventory' }" @click="activeSubTab = 'inventory'">库存</view>
					<view class="tab-item" :class="{ 'active': activeSubTab === 'nearExpiry' }" @click="activeSubTab = 'nearExpiry'">近效期</view>
					<view class="tab-item" :class="{ 'active': activeSubTab === 'slowMoving' }" @click="activeSubTab = 'slowMoving'">不动销</view>
					<view class="tab-item" :class="{ 'active': activeSubTab === 'nonConforming' }" @click="activeSubTab = 'nonConforming'">不合格</view>
				</view>

				<view class="section-title tn-text-bold tn-text-xl tn-mb-sm">
					<view class="indicator blue-indicator"></view>库存金额TOP10
				</view>

				<view class="horizontal-bar-chart-container">
					<view class="chart-content">
						<view class="y-axis-labels">
							<text>健肺丸</text>
							<text>腰痹通胶囊</text>
							<text>散痛舒胶囊</text>
							<text>丹参酮胶囊</text>
							<text>固本延龄丸</text>
							<text>藿香正气水</text>
							<text>恒制咳喘胶囊</text>
							<text>养阴清肺丸</text>
							<text>玉屏风口服液</text>
							<text>利尔眠片</text>
						</view>
						<view class="chart-bars">
							<view class="bar-item">
								<view class="bar green-bar" style="width: 90%;"></view>
								<text class="bar-value">4.5</text>
							</view>
							<view class="bar-item">
								<view class="bar green-bar" style="width: 70%;"></view>
								<text class="bar-value">3.5</text>
							</view>
							<view class="bar-item">
								<view class="bar green-bar" style="width: 60%;"></view>
								<text class="bar-value">3.0</text>
							</view>
							<view class="bar-item">
								<view class="bar green-bar" style="width: 50%;"></view>
								<text class="bar-value">2.5</text>
							</view>
							<view class="bar-item">
								<view class="bar green-bar" style="width: 45%;"></view>
								<text class="bar-value">2.2</text>
							</view>
							<view class="bar-item">
								<view class="bar green-bar" style="width: 40%;"></view>
								<text class="bar-value">2.0</text>
							</view>
							<view class="bar-item">
								<view class="bar green-bar" style="width: 35%;"></view>
								<text class="bar-value">1.8</text>
							</view>
							<view class="bar-item">
								<view class="bar green-bar" style="width: 30%;"></view>
								<text class="bar-value">1.5</text>
							</view>
							<view class="bar-item">
								<view class="bar green-bar" style="width: 25%;"></view>
								<text class="bar-value">1.2</text>
							</view>
							<view class="bar-item">
								<view class="bar green-bar" style="width: 20%;"></view>
								<text class="bar-value">1.0</text>
							</view>
						</view>
					</view>
					<view class="x-axis-labels">
						<text>0</text>
						<text>1</text>
						<text>2</text>
						<text>3</text>
						<text>4</text>
						<text>5</text>
					</view>
					<view class="chart-legend-bottom">
						<span class="legend-color" style="background-color: #4CAF50;"></span>库存总额
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const activeTab = ref('inventory') // Default to inventory for this page
	const activeSubTab = ref('inventory') // Default to inventory sub-tab
</script>

<style scoped>
	.dashboard-stock-container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.header-class {
		background-color: #fff;
		height: 45px;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #435A88; /* Match navbar color */
	}

	.tabs-container {
		display: flex;
		justify-content: space-around;
		border-bottom: 1px solid #eee;
		background-color: #fff;
		padding-bottom: 10px;
		margin-top: -10px; /* Adjust to align with top padding */
		position: sticky; /* Make tabs sticky below header */
		top: 45px; /* Adjust based on navbar height */
		z-index: 10; /* Ensure tabs are above other content */
	}

	.tab-item {
		padding: 10px 0;
		font-size: 16px;
		color: #666;
		position: relative;
		cursor: pointer;
		flex: 1;
		text-align: center;
	}

	.tab-item.active {
		color: #435A88;
		font-weight: bold;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40px;
		height: 3px;
		background-color: #435A88;
		border-radius: 2px;
	}

	.section-title {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
		padding-left: 10px;
		padding-top: 10px; /* Add some top padding for spacing after tabs */
	}

	.indicator {
		width: 5px;
		height: 20px;
		margin-right: 10px;
		border-radius: 2px;
	}

	.blue-indicator {
		background-color: #435A88; /* Blue for main sections */
	}

	.green-indicator {
		background-color: #4CAF50; /* Green for sub-sections */
	}

	.cards-grid-inventory {
		display: grid;
		grid-template-columns: repeat(4, 1fr); /* 4 columns for small cards */
		gap: 10px;
		padding: 0 10px;
	}

	.card-item-inventory {
		background-color: #fff;
		border-radius: 8px;
		padding: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 70px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
		text-align: center;
	}

	.card-title {
		font-size: 12px;
		color: #999;
		margin-bottom: 5px;
	}

	.card-value {
		font-size: 16px;
		font-weight: bold;
	}

	.green-text {
		color: #4CAF50;
	}

	.blue-text {
		color: #2196F3;
	}

	.tabs-sub-container {
		display: flex;
		justify-content: space-around;
		border-bottom: 1px solid #eee;
		margin-bottom: 15px;
		padding-bottom: 10px;
		padding-left: 10px;
		padding-right: 10px;
		background-color: #fff;
	}

	.tabs-sub-container .tab-item {
		flex: 1;
		padding: 8px 0;
		font-size: 14px;
		text-align: center;
	}

	.tabs-sub-container .tab-item.active {
		color: #435A88;
		font-weight: bold;
	}

	.tabs-sub-container .tab-item.active::after {
		width: 30px;
		background-color: #435A88;
	}

	.horizontal-bar-chart-container {
		background-color: #fff;
		border-radius: 8px;
		margin: 0 10px;
		padding: 20px 10px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	}

	.chart-content {
		display: flex;
		height: 300px;
		margin-bottom: 20px;
	}

	.y-axis-labels {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		width: 100px;
		font-size: 12px;
		color: #666;
		padding-right: 10px;
		text-align: right;
	}

	.chart-bars {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		padding-left: 10px;
		border-left: 1px solid #eee;
	}

	.bar-item {
		display: flex;
		align-items: center;
		height: 24px;
		position: relative;
	}

	.bar {
		height: 16px;
		background-color: #4CAF50;
		border-radius: 8px;
		transition: width 0.5s ease-in-out;
	}

	.bar-value {
		position: absolute;
		right: 10px;
		font-size: 12px;
		color: #666;
	}

	.x-axis-labels {
		display: flex;
		justify-content: space-between;
		margin-left: 110px;
		padding-top: 10px;
		font-size: 12px;
		color: #999;
	}

	.chart-legend-bottom {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		margin-top: 20px;
		font-size: 14px;
		color: #666;
	}

	.chart-legend-bottom .legend-color {
		width: 12px;
		height: 12px;
		border-radius: 3px;
		margin-right: 8px;
	}
</style> 